import * as React from 'react'
import { cn } from '@/lib/utils'

// 徽章变体类型
export type BadgeVariant = 
  | 'default'   // 默认样式
  | 'primary'   // 主要颜色
  | 'secondary' // 次要颜色
  | 'outline'   // 轮廓样式
  | 'success'   // 成功状态
  | 'warning'   // 警告状态
  | 'danger'    // 危险状态
  | 'info'      // 信息状态
  | 'theme'     // 使用主题色

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: BadgeVariant
}

function Badge({ 
  className, 
  variant = 'default', 
  ...props 
}: BadgeProps) {
  return (
    <div
      className={cn(
        // 基础样式
        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
        
        // 变体样式
        {
          // 默认样式
          'bg-gray-100 text-gray-800': variant === 'default',
          
          // 主要颜色
          'bg-blue-100 text-blue-800': variant === 'primary',
          
          // 次要颜色
          'bg-gray-200 text-gray-800': variant === 'secondary',
          
          // 轮廓样式
          'border border-gray-200 text-gray-800': variant === 'outline',
          
          // 成功状态
          'bg-green-100 text-green-800': variant === 'success',
          
          // 警告状态
          'bg-yellow-100 text-yellow-800': variant === 'warning',
          
          // 危险状态
          'bg-red-100 text-red-800': variant === 'danger',
          
          // 信息状态
          'bg-blue-100 text-blue-800': variant === 'info',
          
          // 主题色 - 使用CSS变量
          'bg-[var(--primary-bg-light)] text-[var(--primary-text-dark)] dark:bg-[var(--primary-bg-dark)] dark:text-[var(--primary-text-light)]': variant === 'theme',
        },
        
        className
      )}
      {...props}
    />
  )
}

export { Badge } 